<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="top">
          <!-- 表单 -->
          <el-form
            ref="form"
            :inline="true"
            :model="fromSearch"
            class="demo-form-inline"
          >
            <el-form-item label="目录名称" style="margin-right: 50px">
              <el-input
                v-model="fromSearch.directoryName"
                placeholder="目录名称"
              />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="fromSearch.state" placeholder="请选择">
                <el-option label="禁用" value="0" />
                <el-option label="启用" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm">清除</el-button>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
          <!-- 新增按钮 -->
          <el-button
            size="small"
            icon="el-icon-edit"
            type="success"
            @click="addDirectoryFn"
          >新增目录</el-button>
        </div>
        <!-- alert -->
        <el-alert
          class="el_alert"
          show-icon
          :title="`数据一共${total}条`"
          type="info"
          :closable="false"
        />

        <!-- 表格 -->
        <el-table
          :data="directoryList"
          style="width: 100%"
          :header-cell-style="{
            background: '#fafafa',
            color: '#909399',
            fontWeight: '700',
            borderBottom: '2px solid #e8e8e8',
          }"
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="subjectName" label="所属学科" />
          <el-table-column prop="directoryName" label="目录名称" />
          <el-table-column prop="creatorID" label="创建者" />
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | formatTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量" />
          <el-table-column prop="state" label="状态">
            <template v-slot="scope">
              {{ scope.row.state === 1 ? "已启用" : "已禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="168">
            <template v-slot="scope">
              <el-button type="text" @click="disabledDirectoryFn(scope.row)">{{
                scope.row.state === 1 ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="editDirectoryFn(scope.row)"
              >修改</el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="delDirectoryFn(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          class="pagination"
          background
          :current-page="fromSearch.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="fromSearch.pageSize"
          layout=" prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- 新增弹框 -->
        <el-dialog
          v-if="showDialog"
          :title="isEdit ? '修改目录' : '新增目录'"
          :visible.sync="showDialog"
          width="30%"
        >
          <directorys-add
            :is-edit="isEdit"
            :directory-data="directoryData"
            @closeDialog="closeDialog"
            @randerDirectoryList="randerDirectoryList"
          />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import directorysAdd from '../components/directorys-add.vue'
import {
  list as getDirectoryList,
  remove as delDirectory,
  changeState as changeDirectoryState
} from '@/api/hmmm/directorys'
import dayjs from 'dayjs'
export default {
  name: 'Directorys',
  components: {
    directorysAdd
  },
  filters: {
    // 格式化入职日期的方法
    formatTime(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data() {
    return {
      fromSearch: {
        directoryName: '',
        state: null,
        page: 1,
        pagesize: 10
      },
      directoryList: [], // 学科目录列表
      total: 0, // 目录条数
      showDialog: false, // 展示添加弹框
      isEdit: false, // 是否为编辑
      directoryData: {} // 编辑目录的数据
    }
  },
  created() {
    this.getDirectoryListFn()
  },
  methods: {

    // 点击禁用或者启用按钮
    async disabledDirectoryFn(data) {
      // console.log(data)
      if (data.state === 1) {
        data.state = 0
        await changeDirectoryState({ id: data.id, state: data.state })
      } else if (data.state === 0) {
        data.state = 1
        await changeDirectoryState({ id: data.id, state: data.state })
      }
      this.$message.success('操作成功')
      this.getDirectoryListFn()
    },

    // 点击修改按钮，修改目录
    editDirectoryFn(data) {
      this.isEdit = true
      this.showDialog = true
      this.directoryData = data
    },

    // 点击删除按钮，删除该条目录
    async delDirectoryFn(data) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该目录, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmRes === 'cancel') return this.$message('您取消了删除')

      await delDirectory(data)
      this.$message.success('删除成功') // 后台返回没有提示
      // 刷新列表
      // 分页的判断
      if (this.directoryList.length === 1) {
        this.fromSearch.page--
        if (this.fromSearch.page <= 0) {
          this.fromSearch.page = 1
        }
      }
      console.log(this.directoryList.length)
      console.log(this.fromSearch)
      this.getDirectoryListFn()
    },
    // 点击取消按钮，关闭弹框，重置校验
    closeDialog() {
      this.showDialog = false
    },
    // 添加成功，关闭弹框
    randerDirectoryList() {
      this.showDialog = false
      this.isEdit = false
      this.getDirectoryListFn()
    },
    // 点击显示添加弹框
    addDirectoryFn() {
      this.showDialog = true
    },
    // 获取学科目录列表
    async getDirectoryListFn() {
      const res = await getDirectoryList(this.fromSearch)
      this.directoryList = res.data.items
      this.total = res.data.counts
    },
    // 搜索按钮
    onSubmit() {
      this.getDirectoryListFn()
    },
    // 点击清除，重置表单
    resetForm() {
      this.fromSearch = {}
    },
    // 页面条数发生变化
    handleSizeChange(newPagesize) {
      this.fromSearch.pagesize = newPagesize
      this.getDirectoryListFn()
    },
    // 当前页发生变化
    handleCurrentChange(newPage) {
      this.fromSearch.page = newPage
      this.getDirectoryListFn()
    }
  }
}
</script>

<style scoped>
.el-button--small {
  height: 35px;
}
.top {
  display: flex;
  justify-content: space-between;
}
.el_alert {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
